<template>
  <Home>
    <div class="data">
      <div class="title">事故案件</div>
      <!-- head -->
      <div class="content">
        <span>
          商品号:
          <input placeholder="请输入" v-model="value" />
        </span>
        <span>
          变动类型:
          <a-select placeholder="请选择" style="width: 120px; margin-left: 12px; font-size: 14px">
            <a-select-option value="jack">类别一</a-select-option>
            <a-select-option value="lucy">类别一</a-select-option>
          </a-select>
        </span>
        <a-button style="margin-left: 59px" type="primary" @click="getAccident">查询</a-button>
        <a-button style="margin-left: 21px" type="primary" @click="dialogFormVisible = true">添加商品</a-button>
      </div>
      <!-- 列表 -->
      <a-table :columns="columns" :data-source="list">
        <span class="orderspan" slot="action" slot-scope="text, record, index">
          <a-popconfirm
            title="确定删除吗？"
            ok-text="是"
            cancel-text="否"
            @confirm="deleteManager(list[index].id)"
          >
            <a href="#">删除</a>
          </a-popconfirm>
          <a-divider type="vertical" />
          <!-- 弹框 -->
          <div>
            <el-button type="text" @click="update(list[index].id)" :id="list[index].id">更新</el-button>
            <el-dialog title="更改事故信息" :visible.sync="dialogFormVisible">
              <el-form>
                <el-form-item label="单位ID" :label-width="formLabelWidth">
                  <el-input v-model="form.companyId" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="单位名称" :label-width="formLabelWidth">
                  <el-input v-model="form.companyName" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="立案时间" :label-width="formLabelWidth">
                  <el-input type="number" v-model="form.filingTime" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="事故罚款" :label-width="formLabelWidth">
                  <el-input type="number" v-model="form.fine" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="队伍名称" :label-width="formLabelWidth">
                  <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="预防罚款" :label-width="formLabelWidth">
                  <el-input type="number" v-model="form.preventFine" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                  <el-input v-model="form.remarks" autocomplete="off"></el-input>
                </el-form-item>
                 <el-form-item label="录入人员" :label-width="formLabelWidth">
                  <el-input v-model="form.police" autocomplete="off"></el-input>
                </el-form-item>
              </el-form>
              <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="upfrom">确 定</el-button>
              </div>
            </el-dialog>
          </div>
        </span>
      </a-table>
    </div>
  </Home>
</template>
<script>
import Home from "@/components/Home/index";
import { listAccident } from "@/api/getInfoList";
import { getAccident } from "@/api/getInformation";
import { updateAccident } from "@/api/updateInformation";
import { deleteAccident } from "@/api/deleteInformation";

export default {
  data() {
    return {
      list: [],
      columns,
      id: "",
      value: "",
      detailData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      form: {
        companyId: "",
        companyName: "",
        filingTime: 0,
        fine: 0,
        name: "",
        preventFine: 0,
        remarks: ""
      },
      formLabelWidth: "120px",
      query: false,
      indexs: "",
      count: 0,

      params: {
        page: 1,
        perPage: 20
      }
    };
  },
  mounted() {
    this.getListAccident();
  },
  components: {
    Home
  },
  methods: {
    // 列表渲染
    async getListAccident() {
      const data = await listAccident(this.params);
      const { count, list } = data;
      this.count = count || 0;
      this.list = list || [];
      console.log("list", list);
    },

    //单个查询
    async getAccident() {
      const id = this.value;
      console.log("id", id);
      if (id !== "") {
        const data = await getAccident(id);
        console.log(data);
        this.form = [];
        console.log(this.form);
        this.form.push(data);
        console.log(this.form);
      } else {
        alert("商品号错误！！");
      }
    },

    //更新填充表格
    async update(id) {
      // 点击的id
      this.id = id;
      this.dialogFormVisible = true;
      const ids = this.id;
      const datas = await getAccident(ids);
      this.detailData = datas;
      // console.log("this.detailData", this.detailData);
      this.form = this.detailData;
    },
    //更新
    upfrom() {
      this.dialogFormVisible = false;
      const id = this.id;
      const form = this.form;
      delete form.createTime;
      delete form.id;
      console.log(this.form);
      updateAccident(id, form).then(res => {
        if (res) console.log(res);
      });
      // console.log(id);
      // console.log("data", data);
      // const detaile = updateAccident(id, data);
      // // .then((data) => {
      // console.log("data1", detaile);
      // this.getListAccident();
      // });
    },

    //删除
    async deleteManager(id) {
      const data = await deleteAccident(id);
      if (data) {
        this.$message.success("删除成功");
        this.getListAccident();
      }
    }
  }
};

const columns = [
  // {
  //   title: "地址",
  //   dataIndex: "address",
  //   key: "address",
  //   scopedSlots: { customRender: "number" },
  //   customRender: (text, row, index) => {
  //     // console.log(index);
  //     return index;
  //   }
  // },
  {
    title: "单位ID",
    dataIndex: "id",
    key: "id"
  },
  {
    title: "单位名称",
    dataIndex: "companyName",
    key: "companyName"
  },
  {
    title: "创建时间",
    dataIndex: "createTime",
    key: "createTime",
    ellipsis: true
  },
  {
    title: "立案时间",
    dataIndex: "fillingTime",
    key: "fillingTime",
    ellipsis: true
  },
  {
    title: "事故罚款",
    dataIndex: "fine",
    key: "fine",
    ellipsis: true
  },
  {
    title: "图片列表",
    dataIndex: "img",
    key: "img",
    ellipsis: true
  },
  {
    title: "队伍名称",
    dataIndex: "name",
    key: "name",
    ellipsis: true
  },
  {
    title: "预防罚款",
    dataIndex: "preventFine",
    key: "preventFine",
    ellipsis: true
  },
  {
    title: "备注",
    dataIndex: "remarks",
    key: "remarks",
    ellipsis: true
  },
  {
    title: "操作",
    key: "action",
    align: "center",
    dataIndex: "action",
    ellipsis: true,
    scopedSlots: { customRender: "action" }
  }
];
</script>
<style>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  margin: 16px;
  background-color: rgba(0, 33, 64, 1);
  color: white;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.orderspan {
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>
